<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<html>
	<head>
		<script src="${ctxStatic}/vis/dist/moment.js"></script>
		<script src="${ctxStatic}/vis/dist/vis.min.js"></script>
		<link href="${ctxStatic}/vis/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="visualization"></div>

		<script type="text/javascript">
		  // DOM element where the Timeline will be attached
		  var container = document.getElementById('visualization');
		  // create a data set with groups
  		  var groups = new vis.DataSet();
		  groups.add([
		    {
		      id: 1,
		      content: "Lee",
		      nestedGroups: [11,12,13]
		    },
		    {
		      id: 2,
		      content: "invisible group",
		      visible: false
		    },
		    {
		      id: 3,
		      content: "John",
		      nestedGroups: [14],
		      showNested: false
		    },
		    {
		      id: 4,
		      content: "Alson"
		    },
			{
		      id: 11,
		      content: "cook",
		    },
		    {
		      id: 12,
		      content: "shop",
		    },
		    {
		      id: 13,
		      content: "clean house",
		    },
		    {
		      id: 14,
		      content: "wash dishes",
		    }
		  ]);
		

		  // Create a DataSet (allows two way data-binding)
		  var items = new vis.DataSet(${dataSetList});
			/**[
		    {id: 1, content: '<span style="color:#97B0F8;">(item 1)</span>', start: '2017-09-12', group: 1},
		    {id: 2, content: 'item 2', start: '2017-09-14', group: 1},
		    {id: 3, content: 'item 3', start: '2017-09-18', group: 3},
		    {id: 4, content: 'item 4', start: '2017-09-16', end: '2017-09-19', group: 3},
		    {id: 5, content: 'item 5', start: '2017-09-25', group: 3},
		    {id: 6, content: 'item 6', start: '2017-09-27', type: 'point', group: 1}//var types = [ 'box', 'point', 'range', 'background']
		  ]
		  start: new Date(),
		    end: new Date(new Date().getTime() + 1000000),
		    rollingMode: {
		      follow: true,
		      offset: 0.5
		    }*/
		  // Configuration for the Timeline
		  var options = {
		  	height: '700px',
		  	groupOrder: 'content',  // groupOrder can be a property name or a sorting function
		  	locale: 'zh-cn'
		  };
		
		  // Create a Timeline
		  var timeline = new vis.Timeline(container, items, options);
		</script>
	</body>
</html>